<template>
  <div class="body">
    <u-input
      v-model="feedbackText"
      :type="feedbackInput.type"
      :border="feedbackInput.border"
      :height="feedbackInput.height"
      :maxlength="feedbackInput.maxlength"
      auto-height="true"
      placeholder="请输入要反馈的内容"
    ></u-input>
    <div class="but">
      <u-button
        size="medium"
        class="but"
        ripple="true"
        ripple-bg-color="rgba(0, 0, 0, 0.15)"
        @click="submit()"
        >提交</u-button
      >
    </div>

    <u-popup v-model="feedbackMsg" mode="center" border-radius="20"
      ><div class="msg">反馈成功</div></u-popup
    >
  </div>
</template>

<script setup>
import { ref } from 'vue'

const feedbackInput = {
  type: 'textarea',
  border: true,
  height: 100,
  maxlength: 10086
}

const feedbackText = ref('')

let feedbackMsg = false
function submit() {
  if (feedbackText.value === '') return
  feedbackMsg = true
  feedbackText.value = ''
}
</script>

<style scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-color: #f3f3f3;
  padding: 5%;
}
.but {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.msg {
  width: 300rpx;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  font-size: 40rpx;
}
</style>
